<template>
	<div class="query">
		<div class="check">
			<div class="c_left">条件搜索栏</div>
			<div class="c_right clear">
				<div class="fl">
					<span class="c_tip">搜索关键字</span>
					<input type="text" class="c_input" v-model="keyword" placeholder="请输入关键字">
				</div>
				<div class="fl" style="margin-left:10px;">
					<el-button type="primary" class="btn_clear" @click="searchFun">搜索</el-button>
				</div>
			</div>
		</div>
		<div class="list_tip clear">
			<!-- <span class="fl">数据管理列表</span> -->
		</div>
		<div class="table_box">
			<vxe-grid border resizable :seq-config="{startIndex: (query.page - 1) * query.limit}"
			:header-cell-style="tableHead"
			:cell-style="tableBody"
			:columns="tableColumn" :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}" @edit-closed="editClosedEvent"></vxe-grid>
			<pagination
			  :total="query.total"
			  :page.sync="query.page"
			  :limit.sync="query.limit"
			  @pagination="getList"
			/>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				keyword:"",
				query: {
				  total: 0,
				  page: 1,
				  limit: 10
				},
				tableColumn: [{
						type: 'seq',
						width: 60,
						title:"序号"
					},
					{
						field: 'ksdm',
						title: '医院科室编码'
					},
					{
						field: 'ksmc',
						title: '医院科室名称'
					},
					{
						field: 'mzksVal',
						title: '是否门诊科室(可编辑)',
						editRender:{ name: '$select', options: [{value:-1,label:"不确定"},{value:1,label:"是"},{value:0,label:"否"}],attrs: {type: 'label'}}
					},
					{
						field: 'zyksVal',
						title: '是否住院科室(可编辑)',
						editRender:{ name: '$select', options: [{value:-1,label:"不确定"},{value:1,label:"是"},{value:0,label:"否"}],attrs: {type: 'label'}}
					},
					{
						field: 'jzksVal',
						title: '是否急诊科室(可编辑)',
						editRender:{ name: '$select', options: [{value:-1,label:"不确定"},{value:1,label:"是"},{value:0,label:"否"}],attrs: {type: 'label'}}
					},
					{
						field: 'sfzyVal',
						title: '是否在用(可编辑)',
						editRender:{ name: '$select', options: [{value:-1,label:"弃用"},{value:0,label:"在用"}],attrs: {type: 'label'}}
					},
					{
						field: 'match_user',
						title: '操作人员/时间'
					},
				],
				tableData: [],
			}
		},
		mounted () {
			this.getList();
		},
		methods:{
			tableHead ({row,rowIdx}) {
				return "background:#409efe;color:#fff;font-size:12px;height:36px;padding:0;line-height:36px;text-align:center;border:0;"
			},
			tableBody({row, column, rowIndex, columnIndex}){
				var style = "padding:0;font-size:12px;color:#8b8b8b;border:0;border-right:1px solid #d9f1f3;"
				if(rowIndex%2 != 0){
					if(columnIndex == 12){
						style += "border:0;"
					}
					style += "height:36px;line-height:36px;background:#eaf4fe;"
			
				}
				if(rowIndex%2 == 0){
					if(columnIndex == 12){
						style += "border:0;"
					}
					style += "height:44px;line-height:44px;background:#fff;"
				}
				return style;
			},
			searchFun(){
				this.query.page = 1;
				this.getList();
			},
			async getList () {
				let res = await this.$custom.dictListDeptData({
					keyword:this.keyword,
					page:this.query.page,
					pageSize:this.query.limit
				})
				console.log(res)
				// if(res.code == 200){
					this.query.total = res.total;
					for(var i in res.rows){
						if(res.rows[i].mzks == "-1"){
							res.rows[i].mzksVal = "不确定";
						}else if(res.rows[i].mzks == "0"){
							res.rows[i].mzksVal = "否";
						}else if(res.rows[i].mzks == "1"){
							res.rows[i].mzksVal = "是";
						}
						
						if(res.rows[i].zyks == "-1"){
							res.rows[i].zyksVal = "不确定";
						}else if(res.rows[i].zyks == "0"){
							res.rows[i].zyksVal = "否";
						}else if(res.rows[i].zyks == "1"){
							res.rows[i].zyksVal = "是";
						}
						
						if(res.rows[i].jzks == "-1"){
							res.rows[i].jzksVal = "不确定";
						}else if(res.rows[i].jzks == "0"){
							res.rows[i].jzksVal = "否";
						}else if(res.rows[i].jzks == "1"){
							res.rows[i].jzksVal = "是";
						}
						
						if(res.rows[i].sfzy == "0"){
							res.rows[i].sfzyVal = "在用";
						}else if(res.rows[i].sfzy == "-1"){
							res.rows[i].sfzyVal = "弃用";
						}
					}
					this.tableData = res.rows;
				// }
			},
			async editClosedEvent ({ row, column }, event) {
				let res;
				if(column.title == "是否门诊科室(可编辑)"){
					res = await this.$custom.editMzks({
						id:row.id,
						mzks:row.mzks,
					})
				}else if(column.title == "是否住院科室(可编辑)"){
					res = await this.$custom.editZyks({
						id:row.id,
						zyks:row.zyks,
					})
				}else if(column.title == "是否急诊科室(可编辑)"){
					res = await this.$custom.editJzks({
						id:row.id,
						jzks:row.jzks,
					})
				}else if(column.title == "是否在用(可编辑)"){
					res = await this.$custom.editSfzy({
						id:row.id,
						sfzy:row.sfzy,
					})
				}
				this.$message({
					message:res.msg,
					type:res.code == 1 ? "success" : "error",
					duration:1500
				})
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	body{
		background:#e6edf5;
	}
	.query{
		width:100%;
		height:100%;
		background:#e6edf5;
		.check{
			font-size:12px;
			display:flex;
			line-height:60px;
			background:#fff;
			text-align:center;
			.c_left{
				width:115px;
				float:left;
			}
			.c_right{
				overflow:hidden;
				color:#636365;
				border-left:1px solid #e6edf5;
				.c_tip{
					display:inline-block;
					width:100px;
					padding-right:10px;
					text-align:right;
				}
				.c_input{
					width:150px;
					height:40px;
					border:1px solid #dcdfe6;
					border-radius:4px;
					padding-left:5px;
				}
				.c_input::-webkit-input-placeholder {
					color: #dcdfe6;
				}
				.c_input::-ms-input-placeholder {
					color: #dcdfe6;
				}
				.c_input::-moz-input-placeholder {
					color: #dcdfe6;
				}
				.c_search{
					width:100px;
				}
				.c_searchbtn{
					display:inline-block;
					width:42px;
					height:25px;
					margin-left:4px;
					background:#28a4f4;
					color:#fff;
					font-size:12px;
					text-align:center;
					line-height:26px;
					border-radius:6px;
					cursor:pointer;
				}
				.c_checkbox{
					width:230px;
					height:40px;
					display:inline-block;
					margin-left:-12px;
				}
				.btn_clear{
					padding:0;
					width:70px;
					height:40px;
					line-height:40px;
				}
			}
		}
		.list_tip{
			font-size:14px;
			color:#29a4f2;
			padding:10px 18px;
		}
		.table_box{
			padding:0 18px;
		}
	}
	.el-checkbox__label{
		padding-left:5px;
	}
	.el-checkbox{
		margin-right:10px;
	}
	.el-form-item{
		margin-bottom:5px;
	}
	.departSearch{
		text-align:left;
		line-height:50px;
		.fl{
			margin-right:30px;
		}
	}
</style>
